<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const currentLang = ref(uni.getStorageSync('language') || 'zh')

// 计算当前是否是维吾尔语
const isUyghur = computed(() => currentLang.value === 'ug')

// 获取字体缩放比例
const fontScale = computed(() => {
  return uni.getStorageSync('fontScale') || 1
})

// 计算字体样式
const fontStyle = computed(() => {
  return {
    fontSize: `${28 * fontScale.value}rpx`
  }
})

const backClick = () => {
  uni.navigateBack()
}

// 表单数据
const feedbackContent = ref('')
const contactInfo = ref('')
const imageList = ref([])

// 字数统计
const wordCount = computed(() => feedbackContent.value.length)

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      imageList.value.push(res.tempFilePaths[0])
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  imageList.value.splice(index, 1)
}

// 提交反馈
const submitFeedback = () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({
      title: t('feedback.emptyTip'),
      icon: 'none'
    })
    return
  }

  // 这里添加提交反馈的逻辑
  uni.showToast({
    title: t('feedback.success'),
    icon: 'success'
  })

  // 清空表单
  feedbackContent.value = ''
  contactInfo.value = ''
  imageList.value = []
}
</script>

<template>
  <tn-navbar backgroundColor="#fff" fixed>{{ t('feedback.title') }}
    <template #back>
      <tn-icon name="left" size="40" @click="backClick"></tn-icon>
    </template>
  </tn-navbar>

  <view class="feedback-page" :class="{ 'rtl': isUyghur }">
    <view class="feedback-title">{{ t('feedback.subtitle') }}</view>

    <view class="feedback-form">
      <view class="form-group">
        <view class="group-title">{{ t('feedback.content.title') }}</view>
        <textarea v-model="feedbackContent" class="feedback-input" :style="fontStyle"
          :placeholder="t('feedback.placeholder')" maxlength="500" />
        <view class="word-count">{{ wordCount }}/500</view>
      </view>

      <view class="form-group">
        <view class="group-title">{{ t('feedback.image.title') }}</view>
        <view class="image-upload">
          <view v-for="(image, index) in imageList" :key="index" class="image-item">
            <image :src="image" mode="aspectFill" />
            <view class="delete-btn" @click="deleteImage(index)">
              <tn-icon name="close" size="32" color="#fff"></tn-icon>
            </view>
          </view>
          <view v-if="imageList.length < 1" class="upload-btn" @click="chooseImage">
            <tn-icon name="plus" size="40" color="#999"></tn-icon>
          </view>
        </view>
      </view>

      <view class="form-group">
        <view class="group-title">{{ t('feedback.contact.title') }}</view>
        <input v-model="contactInfo" class="contact-input" :style="fontStyle"
          :placeholder="t('feedback.contact.placeholder')" type="number" maxlength="11" />
      </view>
    </view>

    <button class="submit-btn" @click="submitFeedback">{{ t('feedback.submit') }}</button>
  </view>
</template>

<style lang="scss" scoped>
.feedback-page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding: 20rpx;

  &.rtl {
    direction: rtl;
  }

  .feedback-title {
    font-size: 32rpx;
    color: #333;
    background: #fff;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
  }

  .feedback-form {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 40rpx;

    .form-group {
      margin-bottom: 32rpx;

      .group-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
      }

      .feedback-input {
        width: 100%;
        height: 240rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #333;
      }

      .word-count {
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 8rpx;
      }

      .contact-input {
        width: 100%;
        height: 88rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #333;
      }

      .image-upload {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .image-item {
          width: 160rpx;
          height: 160rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
            border-radius: 12rpx;
          }

          .delete-btn {
            position: absolute;
            top: -20rpx;
            right: -20rpx;
            width: 40rpx;
            height: 40rpx;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .upload-btn {
          width: 160rpx;
          height: 160rpx;
          background: #f8f8f8;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #0066ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 12rpx;
    text-align: center;
    margin-top: 40rpx;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>